<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.bg{
			background: red;
		}
	</style>
</head>
<body>
<button>点我</button>
<div>你现在过的还好吗？</div>
</body>
<script>
	// 宏队列，微队列(promise MutationObserver)
	// dom的文本内容，属性，节点发生改变。
	const btn = document.querySelector("button");
	const div = document.querySelector("div");
	btn.onclick = function () {
		setTimeout(()=>{
			console.log("over");
		})
		div.innerText += "!";
		div.className = "bg";
		
		// console.log("over");
	}
	// MutationObserver 可以负责对DOM元素进行监听。
	const server = new MutationObserver(function(e,result){
		console.log("server，当监听到的元素发生改变，那么会调用该回调函数",e,result===server);
	});
	// 第一个参数是监听的DOM元素，第二个参数配置项（对象）
	server.observe(div,{
		// 负责监听包裹的内容，一旦内容发生改变即会执行回调（微任务）
		childList:true,
		// 负责监听属性是否有变化，一量变化会执行回调（微任务）
		attributes:true
	})
	
</script>
</html>